<template>
	<div>
		<vm-common-header
	      :pageTitle="pageTitle"
	      :goBack="goBack"></vm-common-header>
	      <div class="mark-cell" v-if="filterBarIndex !== 0" @click="filterBarIndex = 0"></div>
    <div class="filter-bar">
      <ul class="filter-bar-header">
        <li
          :class="[{ 'active': filterBarIndex === 1 }]"
          @click="filterBarIndex === 1 ? filterBarIndex = 0 : filterBarIndex = 1"
        >所有项目</li>
        <li
          :class="[{ 'active': filterBarIndex === 2 }]"
          @click="filterBarIndex === 2 ? filterBarIndex = 0 : filterBarIndex = 2"
        >设备过滤条件</li>
      </ul>
      <div class="filter-bar-content clearfix">
        <div :class="['filter-bar-content-item', { 'active': filterBarIndex === 1 }]">
          <ul class="project-option-list">
            <li :class="[{'active': filters.projectId === ''}]">所有项目</li>
            <li v-for="item in projectOptions" :key="item.id">
              <div class="item-name">{{ item.name }}</div>
            </li>
          </ul>
        </div>
        <div :class="['filter-bar-content-item', { 'active': filterBarIndex === 2 }]">
          <div class="device-filters-tab clearfix">
            <ul class="device-filters-tab-header">
              <li
                :class="[{'active': deviceFiltersTabIndex === 1}]"
                @click="deviceFiltersTabIndex = 1"
              >设备分类</li>
              <li
                :class="[{'active': deviceFiltersTabIndex === 2}]"
                @click="deviceFiltersTabIndex = 2"
              >设备编码</li>
              <li
                :class="[{'active': deviceFiltersTabIndex === 3}]"
                @click="deviceFiltersTabIndex = 3"
              >设备名称</li>
              <li
                :class="[{'active': deviceFiltersTabIndex === 4}]"
                @click="deviceFiltersTabIndex = 4"
              >安装位置</li>
              <li
                :class="[{'active': deviceFiltersTabIndex === 5}]"
                @click="deviceFiltersTabIndex = 5"
              >设备备注</li>
              <li
                :class="[{'active': deviceFiltersTabIndex === 6}]"
                @click="deviceFiltersTabIndex = 6"
              >负责人</li>
              
            </ul>
            <div class="device-filters-tab-content clearfix">
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 1 }]"
              >
                <ul class="device-status-radio-list clearfix">
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio"  value> 所有</label>
                  </li>
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio" value="1"> 待审核</label>
                  </li>
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio" value="2"> 审核通过</label>
                  </li>
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio" value="3"> 审核驳回</label>
                  </li>
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio" value="4"> 启用</label>
                  </li>
                  <li>
                    <label>
                    <input v-model="filters.deviceStatus" type="radio" value="5"> 停用</label>
                  </li>
                </ul>
              </div>
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 2 }]"
              ></div>
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 3 }]"
              ></div>
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 4 }]"
              ></div>
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 5 }]"
              ></div>
              <div
                :class="['device-filters-tab-item', 'clearfix', { 'active': deviceFiltersTabIndex === 6 }]"
              ></div>
            </div>
          </div>
          <div class="filter-bar-footer">
            <mt-button type="default" @click="handleResetFilter">清除</mt-button>
            <mt-button type="danger" @click.native="handleSubmitFilter">确定</mt-button>
          </div>
        </div>
      </div>
    </div>
	     <ul class="e-m-c-wrap">
	     	<li class="e-m-c-li" @click="$router.push({name:'early_warning_details'});" v-for="item in 5" :key="item">
	     		<ul class="e-m-c-top">
	     			<li>报警值 <span>123.66</span></li>
	     			<li><em>234.55</em> 实时值</li>
	     			<li>单位:伏特</li>
	     		</ul>
	     		<ul class="e-m-c-center">
	     			<li><span>报警时间：2018-12-13 18:30:42</span><span>上上限</span></li>
	     			<li>点位号：D-01</li>
	     			<li>点位号名称：电厂设备052处</li>
	     		</ul>
	     	</li>
	     	
	     </ul>
	</div>
</template>

<script>
	import vmCommonHeader from '@/components/vm-common-header' // header 组件
	export default {
		data(){
			return {
				pageTitle: this.$route.meta.pageTitle,
		        goBack: this.$route.meta.goBack,
		         filterBarIndex: 0,
		      deviceFiltersTabIndex: 1,
		      projectOptions: [
		        { name: "项目A", id: "A" },
		        { name: "项目B", id: "B" },
		        { name: "项目C", id: "C" },
		        { name: "项目D", id: "D" }
		      ],
		      deviceStatusOptions: [
		        {
		          label: "disabled option",
		          value: "valueF"
		        },
		        {
		          label: "optionA",
		          value: "valueA"
		        },
		        {
		          label: "optionB",
		          value: "valueB"
		        }
		      ],
		      deviceList: [
		        { id: "01", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "02", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "03", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "04", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "05", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "06", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "07", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "08", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "09", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" },
		        { id: "10", name: "设备名称ASGDVSGDVSG", code: "dmskdmskd445" }
		      ],
		      filters: {
		        projectId: "",
		        deviceStatus: ""
		      }
			}
		},
		components: {
        	'vm-common-header': vmCommonHeader,	

		},
		 methods: {
		   
		   handleResetFilter() {
		   	this.filterBarIndex=0
		   },
		 }
	}
</script>

<style lang="scss" scoped>
.filter-bar {
  height: 98px;
  background-color: #fff;
  position: relative;
  z-index: 1000;
  margin-bottom: 16px;
  .filter-bar-header {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
    border-bottom: 1px solid #dadade;
    height: 98px;
    li {
      flex: 1;
      border-right: 1px solid #eee;
      font-size: 30px;
      color: #666;

      &:last-of-type {
        border-right: 0;
      }

      &.active {
        color: #f34b50;
      }
    }
  }

  .filter-bar-content {
    width: 100%;
    overflow-y: auto;
    background-color: #fff;
    position: absolute;
    top: 98px;

    .filter-bar-content-item {
      width: 100%;
      display: none;
      &.active {
        display: block;
      }
    }
  }
}

.project-option-list {
  padding: 0 34px;

  li {
    height: 80px;
    border-bottom: 1px solid #eee;
    line-height: 80px;
    padding-left: 96px;
    font-size: 28px;
    color: #666;
    text-align: left;

    &:last-of-type {
      border-bottom: 0;
    }

    &.active {
      color: #333;
      background-color: #eee;
    }

    .item-name {
      padding-left: 34px;
    }
  }
}

.device-filters-tab {
  border-bottom: 1px solid #eee;
  .device-filters-tab-header {
    width: 252px;
    border-right: 1px solid #eee;
    float: left;
    box-sizing: border-box;

    li {
      height: 90px;
      line-height: 90px;
      text-align: center;
      font-size: 28px;
      color: #666;

      &.active {
        background-color: #eee;
        color: #333;
      }
    }
  }

  .device-filters-tab-content {
    margin-left: 252px;
    box-sizing: border-box;

    .device-filters-tab-item {
      display: none;

      &.active {
        display: block;
      }
    }
  }
}

.device-status-radio-list {
  padding-top: 56px;
  li {
    text-align: left;
    padding-left: 60px;
    width: 50%;
    line-height: 98px;
    float: left;
    height: 98px;
    font-size: 28px;
    color: #999999;
  }
}

.filter-bar-footer {
  background: #ffffff;
  border-top: 1px solid #eeeeee; /* no */
  width: 100%;
  height: 120px;
  border-top: 1px solid #eee; /* no */
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
  button {
    width: 220px;
    height: 80px;
    margin: 21px 20px 12px 30px;
    border-radius: 10px; /* no */
    font-size: 28px;
    &:first-child {
      border: 1px solid #f34b50; /* no */
      background-color: #fff;
      color: #f34b50;
      font-size: 24px;
    }
    &:last-child {
      background-color: #f34b50;
      color: #fff;
      font-size: 24px;
    }
  }
}

.mark-cell {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

.content-list {
  height: 100%;
  background-color: #fff;
  overflow-y: auto;
  ul {
    li {
      height: 146px;
      padding: 30px 200px 0px 36px;
      text-align: left;

      &:nth-child(2n) {
        background-color: #ebebeb;
      }

      .device-name {
        font-size: 28px;
        color: #666;
        margin-bottom: 30px;
        line-height: 28px;
      }

      .device-code {
        font-size: 28px;
        color: #666;
        line-height: 28px;
        float: left;
      }

      .insert-status {
        font-size: 28px;
        color: #666;
        line-height: 28px;
        float: right;
      }
    }
  }
}

.right-arraw {
    position: relative;
}

.right-arraw::after {
    content: '>';
    position: absolute;
    color: #60a2f2;
    right: -30px;
    font-weight: bold;
    top: 0;
    font-size: 28px;
    display: block;
}

.clearfix::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}
.e-m-c-li{
	width: 100%;
	height: auto;
	margin-top: 20px;
	border-top: 1px solid #eeeeee  /*no*/;
	border-bottom: 1px solid #eeeeee  /*no*/;
	background-color: #ffffff;
	padding: 0 20px;
	font-size: 28px;
	color: #666666;
}
.e-m-c-top{
	display: flex;
	height: 100px;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #999999 /*no*/;
	padding: 0 20px;
	span{
		color: #ffffff;
		background-color: red;
		padding:10px 15px;
		border-radius: 10px /*no*/;
	}
	em{
		color: #000000;
		background-color: #eeeeee;
		padding:10px 15px;
		border-radius: 10px /*no*/;
	}
}
.e-m-c-center{
	li{
		height: 65px;
		padding: 0 20px;
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
	
}
</style>